<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //ES6: ECMA Script 6 --->2015
      //let 声明变量
      // var a = 10;
      // let b = 10;
      // console.log(a, b);

      //let 和var 的区别
      //1.let不能被重复声明  var 可以
      // var a = 10;
      // var a = 20;
      // console.log(a);

      // let a = 10;
      // let a = 20;
      // console.log(a); //报错 不能重复声明

      //2.let 没有声明前置  暂时性死区Temporal Dead Zone
      // console.log(a);
      // var a = 10; //var 会提升声明  undefined

      // console.log(b);
      // let b = 20; //报错 必须先定义再调用

      //3.let声明的变量 不会挂载在window上

      // var a = 10;
      // console.log(window.a);

      // let a = 10;
      // console.log(window.a); //undefined 会把值放在tdz里面

      //4.let支持块作用域  var 不支持
      //块作用域是大括号包裹的位置

      //var 作用域  1.全局作用域 2.局部作用域:  函数作用域
      //let 作用域 1.全局作用域 2.局部作用域: 函数作用域   块作用域

      {
        //块作用域
      }

      /*   {
        let a = 10; //只会在大括号包裹的里面起作用
        console.log(a);
        var b = 15;
      }
      console.log(b); //var 不支持块作用域 所以有没有块没有关系 外部可以log

      console.log(a); //报错 */

      // // 立即执行函数IIFE
      // (function (params) {})(); //创建函数作用域 模拟块级作用域 声明变量只能在里面使用

      {
        let a = 10;
        let b = 20;
        console.log(a, b);
      }
      {
        let a = 30;
        let b = 40;
        console.log(a, b);
      }

      ///

      //
      // for (var i = 0; i < 2; i++) {}
      // var i = 0;
      // var i = 1;
      // var i = 2; //在一个作用域里面循环 运行完成后覆盖 最后取值2

      /*  for (let i = 0; i < 2; i++) {}
      {
        let i = 0;
      }
      {
        let i = 1;
      }
      {
        let i = 2;
      } //用let 会在每个独自的作用域里面循环 值不会覆盖 */

      for (var i = 0; i < 3; i++) {
        setTimeout(function () {
          console.log(i);
        }, 1000);
      }
      //var情况
      var i = 0;
      var i = 1;
      var i = 2;
      var i = 3;
      setTimeout(function () {
        console.log(i); //i=3,会输出三个3
      }, 1000);

      //let情况
      {
        let i = 0;
        setTimeout(function () {
          console.log(i); //0
        }, 1000);
      }
      {
        let i = 1;
        setTimeout(function () {
          console.log(i); //1
        }, 1000);
      }
      {
        let i = 2;
        setTimeout(function () {
          console.log(i); //2
        }, 1000);
      }

      //最后打印012

      //
      //
      //
      //
      //或者人为创建自己的函数作用域
      for (var i = 0; i < 3; i++) {
        (function (i) {
          setTimeout(function () {
            console.log(i);
          }, 1000);
        })(i);
      }
    </script>
  </body>
</html>
